<!--
 * @Author: zhangwei 1405298045@qq.com
 * @Date: 2022-08-25 10:02:20
 * @LastEditTime: 2022-09-26 17:27:35
 * @LastEditors: 张伟 10187258+zhang_wei_self@user.noreply.gitee.com
 * @Description: 
 * @FilePath: /ll-fe-mp-dyfx/src/components/popupCommissionModel/index.vue
 *  
-->
<template>
	<view class="layout" v-show="value" @click.prevent.stop="changeModel" @touchmove.stop.prevent="stopScrolling">
		<view
			@click.stop.prevent="stopScrolling"
			class="layout-main"
			:animation="animationData"
			:style="{
				height: mainHeight,
				transform: 'translateY(' + mainHeight + ')'
			}"
		>
			<view class="layout-main-title">
				<view class="layout-main-title-left">
					{{ title }}
				</view>
				<view class="layout-main-title-right">
					<image :src="clsoeIcon" @click.stop="changeModel" />
				</view>
			</view>

			<view class="layout-main-content">
				<scroll-view scroll-y class="actionSheet-main">
					<view
						class="layout-main-content-item"
						:key="item.value"
						v-for="item in list"
						@click.stop.prevent="selectCommissionModel(item)"
					>
						<view class="layout-main-content-item-left">{{ item.label }}</view>

						<view class="layout-main-content-item-right">
							<image :style="{background: item.isDisabled ? '#ccc' : 'none'}" :src="getShowIcon(item)" />
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="layout-main-footer">
				<button @click.stop.prevent="changeActiveValue">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getSystemInfo, defaultImageUrl } from '@/utils';

const clsoeIcon = Object.freeze(`${defaultImageUrl}icon/icon_tc_close.png`);
const needIconObject = Object.freeze({
	default: require('@/static/tandian/icon_xqy_default.png'),
	active: require('@/static/tandian/icon_xqy_selected.png')
});

export default {
	name: 'PopupCommissionModel',

	props: {
		value: {
			type: Boolean,
			default: false
		},

		activeValue: {
			type: Array,
			default: () => {
				return [];
			}
		},

		title: {
			type: String,
			default: '请选择佣金模式'
		},

		delay: {
			type: Number,
			default: 300
		},

		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		popupHeight: {
			type: [Number, String],

			default: uni.upx2px(680)
		},

		otherParams: {
			type: Object
		}
	},

	data() {
		return {
			clsoeIcon,

			screenHeight: 0,
			animationData: {},
			singleItemParams: {}
		};
	},

	computed: {
		mainHeight() {
			const { screenHeight, popupHeight } = this;
			/**
			 * 规则小于 1， 取百分百。 大于 或者 不是Numebr 直接赋值
			 */
			const isNumber = typeof popupHeight === 'number';
			if (isNumber && popupHeight <= 1) {
				return `${screenHeight * popupHeight}px`;
			}

			return isNumber ? `${popupHeight}px` : popupHeight;
		},

		isSingleItemParams() {
			const { singleItemParams } = this;

			return Object.keys(singleItemParams).length;
		}
	},

	watch: {
		value: {
			handler(value) {
				this.changeTranslateY(value);
				this.selectCommissionModel(this.activeValue[0] || {});

				if (!value) {
					return;
				}
			}
		}
	},

	created() {
		const { screenHeight } = getSystemInfo();
		this.screenHeight = screenHeight;

		this.animation = uni.createAnimation({
			duration: this.delay
		});
		// timingFunction: 'ease',
	},

	methods: {
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		},

		getShowIcon(params) {
			const { value,isDisabled } = params;
			if(isDisabled){
				return
			}
			const {
				singleItemParams,
				isSingleItemParams,
				activeValue: [singleItem]
			} = this;

			let filtersValue = singleItem?.value;
			isSingleItemParams && (filtersValue = singleItemParams.value);

			let type = filtersValue === value ? 'active' : 'default';

			return needIconObject[type];
		},

		changeModel() {
			const { value, delay } = this;

			this.changeTranslateY(!value);
			setTimeout((e) => {
				this.$emit('input', !this.value);
			}, delay);
		},

		selectCommissionModel(params) {
			// const { isDisabled } = this.singleItemParams;
			// if(isDisabled){
			// 	uni.showToast({
			// 		title: '不可选',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			this.singleItemParams = params?.$orig || params;
		},

		changeActiveValue() {
			const { activeValue, otherParams, isSingleItemParams, singleItemParams } = this;
			const { isDisabled } = singleItemParams;
			if(isDisabled){
				return
			}
			const filtersValue = isSingleItemParams ? [singleItemParams] : activeValue;
		
			this.changeModel();
			this.$emit('changeBottomActionSheet', filtersValue, otherParams);
		},

		changeTranslateY(status) {
			let { animation, mainHeight } = this;
			const translateY = status ? 0 : parseInt(mainHeight);

			animation.translateY(translateY).step();
			this.animationData = animation.export();
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

image {
	vertical-align: bottom;
}

.layout {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);

	&-main {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 680rpx;
		background: #fff;
		// background: #f9f9f9;
		border-radius: 24rpx 24rpx 0 0;

		padding: 36rpx 20rpx 0;

		&-title {
			color: #333;
			font-size: 32rpx;
			font-weight: 500;

			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-right {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		&-footer {
			@include Db_iosBottomDistance();

			button {
				@include Db_newButton(88rpx, 24rpx);
				// background: #ff6b11;
			}

			// &:active {
			// 	background: rgba(255, 107, 17, 0.7);
			// }
		}

		&-content {
			height: calc(100% - env(safe-area-inset-bottom) - 168rpx);
			padding: 16rpx 0;
			margin: 0 -20rpx;

			.actionSheet-main {
				height: 100%;
				box-sizing: border-box;
			}

			&-item {
				width: calc(100% - 40rpx);
				margin: 20rpx 0 0 20rpx;
				height: 120rpx;
				padding: 0 32rpx;
				background: #fff;

				border-radius: 24rpx;

				/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
				// box-shadow: 0px 21rpx 42rpx 42rpx rgba(0, 0, 0, 0.05);
				box-shadow: 0px 4rpx 42rpx 0px rgba(0, 0, 0, 0.05);

				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
			}
		}
	}
}
</style>
